<template>
	<view>
		<!-- 搜索框区域 -->
		<view class="search-box">
			<uni-search-bar class="uni-mt-10" radius="100" @input="input" :focus="true" placeholder="输入关键字" clearButton="auto" cancelButton="none" @confirm="search" />
		</view>
		<!-- 搜索结果列表区域 -->
		<view class="suggest-list" v-if="searchResList.length !== 0">
			<view class="suggest-item" v-for="(item, index) in searchResList" :key="index" @click="jumpGoodsDetailPage(item.goods_id)">
				<view class="suggest-name">{{ item.goods_name }}</view>
				<uni-icons type="forward" size="15"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史记录区域 -->
		<view class="history-box" v-else>
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="18" @click="clearHistory()"></uni-icons>
			</view>
			<view class="history-list">
				<uni-tag :circle="true" :inverted="true" :text="item" v-for="(item, index) in historyList" :key="index" @click="jumpGoodsListPage(item)"></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 定时器的id
			timeId: null,
			// 搜索关键词
			keyword: '',
			// 搜索结果列表
			searchResList: [],
			// 搜索历史记录
			historyList: []
		};
	},
	onLoad() {
		// 从本地缓存中同步获取搜索历史记录
		this.historyList = JSON.parse(uni.getStorageSync('keywords') || '[]');
	},
	methods: {
		// 输入框
		input(e) {
			// 根据定时器的id取消定时器
			clearTimeout(this.timeId);
			// 设定一个定时器、1000毫秒内未触发输入事件
			this.timeId = setTimeout(() => {
				this.keyword = e.trim();
				this.getSearchList(this.keyword);
			}, 1000);
		},
		// 获取搜索结果列表
		async getSearchList(keyword) {
			if (keyword === '') {
				this.searchResList = [];
				return;
			}
			const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: keyword });
			if (res.meta.status !== 200) return uni.$showMsg();
			this.searchResList = res.message;
			// 关键词保存到历史记录
			this.saveHistory(keyword);
		},
		// 跳转商品详情页面
		jumpGoodsDetailPage(goods_id) {
			uni.navigateTo({
				url: '/subpkg/goods/goods_detail?goods_id=' + goods_id
			});
		},
		// 保存历史搜索关键字
		saveHistory(keyword) {
			// 查询当前关键字是否已存在？
			let index = this.historyList.indexOf(keyword);
			// 不存在则保存
			if (index <= -1) this.historyList.unshift(keyword);
			// 持久化存储 JSON.stringify 序列化的对象
			uni.setStorageSync('keywords', JSON.stringify(this.historyList));
		},
		// 清空搜索历史记录
		clearHistory() {
			this.historyList = [];
			// 从本地缓存中同步移除
			uni.removeStorageSync('keywords');
		},
		// 跳转商品列表页面
		jumpGoodsListPage(keyword) {
			uni.navigateTo({
				url: '/subpkg/goods/goods_list?query=' + keyword
			});
		}
	}
};
</script>

<style lang="scss">
// 搜索框
.search-box {
	// 设置粘性定位、吸顶效果
	position: sticky;
	// 吸顶的位置
	top: 0;
	// 提高层级、反之被覆盖
	z-index: 999;
}
// 搜索结果
.suggest-list {
	padding: 0 5px;
	.suggest-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 10px 0;
		border-bottom: 1px solid #efefef;
		.suggest-name {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 5px;
		}
	}
}
// 搜索历史记录
.history-box {
	padding: 0 10px;
	.history-title {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #efefef;
		line-height: 35px;
		text {
			font-size: 13px;
		}
	}
	.history-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;

		.uni-tag {
			margin-right: 5px;
			border: none;
			line-height: 30px;
		}
	}
}
</style>
